<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=0.5, maximum-scale=2.0, user-scalable=no" />
<title>门店信息审核</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.mask {
     position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
     z-index: 1001; left: 0px;
     opacity:0.5; -moz-opacity:0.5;
}
.model{
     position: absolute; z-index: 1003;
     text-align:center;
     display: none;
}
#container {
	overflow: hidden;
	padding: 20px;
	width: 100%;
	margin: 0 auto;
}
#in { 
	overflow: hidden;
}
.sonic {
	position: absolute;
	top: 30%;
	left: 30%;
	margin-left: 30%;
    margin-top: 20%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}
canvas { display: block; }

</style>

</head>

<body>


<div id="mask" class="mask"></div>
<div>
    <div id="model" class="model"></div>
</div>

<div id="container"><div id="in"></div></div>

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

<script src="js/sonic.js"></script>
<script type="text/javascript">
$(document).ready(function(){
showMask();
showAll('#model');
	var loaders = [{
		width: 100,
		height: 100,
		'z-index': 1005,
		stepsPerFrame: 1,
		trailLength: 1,
		pointDistance: .02,
		fps: 30,
		fillColor: '#CCCCCC',
		step: function(point, index) {
			this._.beginPath();
			this._.moveTo(point.x, point.y);
			this._.arc(point.x, point.y, index * 7, 0, Math.PI*2, false);
			this._.closePath();
			this._.fill();

		},
		path: [
			['arc', 50, 50, 30, 0, 360]
		]
	}];
var d, a, container = document.getElementById('in');
for (var i = -1, l = loaders.length; ++i < l;) {
	d = document.createElement('div');
	d.className = 'l';
	a = new Sonic(loaders[i]);
	d.appendChild(a.canvas);
	container.appendChild(d);
	a.play();
}
});
</script>
<script type="text/javascript">
	//兼容火狐、IE8  
    function showMask(){  
        $("#mask").css("height",$(document).height());
        $("#mask").css("width",$(document).width());
        $("#mask").show();
    }
    function closeMask(){  
        $("#mask").css("height",0);
        $("#mask").css("width",0);
        $("#mask").hide();
    }
    //让指定的DIV始终显示在屏幕正中间  
    function letDivCenter(){   
        var top = ($(window).height() - $("#model").height())/2;
        var left = ($(window).width() - $("#model").width())/2;
        var scrollTop = $(document).scrollTop();
        var scrollLeft = $(document).scrollLeft();
        $("#model").css( { position : 'absolute', 'top' : top + scrollTop, left : left + scrollLeft } ).show();  
    }  
    function showAll(){  
        showMask();  
        letDivCenter();  
    }
	function closeAll(){  
        closeMask(); 
        $("#model").hide();
    }
</script>
</body>
</html>